<template>
  <div class="octagon" :style="octagonLiStyle">
    <img class="octagon-img" :src="octagonImg" />
    <div class="octagon-msg">
      <div class="octagon-icon-img" v-if="iconSrc">
        <img :src="iconSrc" alt="">
      </div>
      <div class="octagon-icon" v-else>
        <span class="octagon-icon-background">
          <i class="iconfont" :class="iconClass"></i>
        </span>
      </div>
      <div class="octagon-message">
        <p class="octagon-message-message">{{ octagonName }}</p>
        <span class="octagon-message-number"><i class="message-number">{{ octagonNumber }}</i>{{ octagonUnit }}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'octagon',
  props: {
    iconClass: {
      type: String
    },
    iconSrc: {
      type: String
    },
    octagonName: {
      type: String,
      default: ''
    },
    octagonNumber: {
      type: [String, Number],
      default: 0
    },
    octagonUnit: {
      type: String
    },
    octagonImg: {
      type: String,
      default: require('./../../assets/images/module/octagon-small.png')
    }
  },
  data () {
    return {
      octagonLiStyle: {
        background: 'url(' + this.octagonImg + ') no-repeat center',
        backgroundSize: '99% 99%'
      }
    }
  },
  methods: {
  },
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
 .octagon{
   position: relative;
   overflow: hidden;
   width: 32%;
   float: left;
   .octagon-img{
     width: 100%;
     opacity: 0;
   }
   .octagon-msg{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: flex-start;
     align-items: center;
   }
   .octagon-icon-img{
     height: 54px;
     width: 56px;
     img {
       width: 100%;
     }
   }
   .octagon-icon{
     height:28px;
     width: 28px;
     margin: 0 0 0 5px;
     border-radius: 100%;
     border: 1px solid rgba(15, 117, 228, 0.6);
     display: flex;
     float: left;
     justify-content: center;
     align-items: center;
     .octagon-icon-background{
       border-radius: 100%;
       width: 80%;
       height: 80%;
       background: rgba(7, 124, 223, 0.2);
       display: flex;
       justify-content: center;
       align-items: center;
       overflow: hidden;
       img{
         width: 65%;
       }
       i{
         color: #077cdf;
       }
     }
   }
   .octagon-message{
     width: 64%;
     float: left;
     text-align: center;
     box-sizing: border-box;
     padding-left: 5px;
     .octagon-message-message{
       width: 100%;
       font-size: 12px;
       height:20px;
       line-height: 20px;
       color: #6f9dd6;
       display: block;
       width: 100%;
       text-align: left;
     }
     .octagon-message-number{
       color: #b8d1f5;
       width: 100%;
       display: block;
       font-size: 12px;
       height: 26px;
       line-height: 26px;
       text-align: left;
       .message-number{
         color: #fff;
         font-size: 14px;
         margin-right: 5px;
       }
     }
   }
 }
 @media screen and (max-width: 1890px){
   .octagon{
     .octagon-message{
       .octagon-message-message{
         height: 18px;
         line-height: 18px;
       }
       .octagon-message-number{
         height:18px;
         line-height: 18px;
         .message-number{
           font-size: 14px;
         }
       }
     }
   }
 }
 @media screen and (min-width:1890px) and (max-width:2500px) {
   .octagon{
     .octagon-message{
       .octagon-message-message{
         height: 18px;
         line-height: 18px;
         font-size: 14px;
       }
       .octagon-message-number{
         height:20px;
         line-height: 20px;
         .message-number{
           font-size: 18px;
         }
       }
     }
     .octagon-icon{
       height:32px;
       width: 32px;
       .octagon-icon-background{
         i{
           font-size: 18px;
         }
       }
     }
   }
 }
 @media screen and (min-width:2501px) and (max-width:2560px) {
   .octagon{
     .octagon-message{
       .octagon-message-message{
         height: 20px;
         line-height: 20px;
         font-size:16px;
       }
       .octagon-message-number{
         height:30px;
         line-height: 30px;
         font-size: 14px;
         .message-number{
           font-size: 24px;
         }
       }
     }
     .octagon-icon{
       height:40px;
       width: 40px;
       .octagon-icon-background{
         i{
           font-size: 22px;
         }
       }
     }
   }
 }
</style>
